<!-- --------------------------------------
 * 日期范围选择器、让element-ui绑定的数组分别对应对到 startTime，endTime 上
 @example
  <DateRangePicker :startTime.sync="dataForm.startTime" :endTime.sync="dataForm.endTime"></DateRangePicker>
-------------------------------------- --->
<template>
  <el-date-picker
    v-bind="$attrs"
    v-model="date"
    :value-format="valueFormat"
    type="daterange"
    @change="change"
    v-on="$listeners"
  >
  </el-date-picker>
</template>

<script>
export default {
  props: {
    startTime: [Number, String, Date],
    endTime: [Number, String, Date],
    valueFormat: {
      type: String,
      default: 'yyyy-MM-dd HH:mm:ss'
    }
  },

  data() {
    return {
      date: ''
    }
  },

  watch: {
    startTime: 'watchDateChangeHandler',
    endTime: 'watchDateChangeHandler'
  },

  created() {
    this.watchDateChangeHandler()
  },

  methods: {
    change(val) {
      let startTime = ''
      let endTime = ''
      if (val && Array.isArray(val)) {
        startTime = val[0]
        endTime = val[1]
      }

      this.$emit('update:startTime', startTime)
      this.$emit('update:endTime', endTime)
      this.$emit('change')
    },

    watchDateChangeHandler() {
      const { startTime, endTime } = this
      if ((startTime === 0 || startTime) && endTime) {
        this.date = [startTime, endTime]
      } else {
        this.date = null
      }
    }
  }
}
</script>
